<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>用户信息登记</title>
    <style>
        body { font-family: Arial, sans-serif; padding: 20px; background: #f5f5f5; }
        .form-container { max-width: 500px; margin: 0 auto; background: white; padding: 30px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
        input, textarea, button { width: 100%; padding: 10px; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; }
        button { background-color: #409eff; color: white; border: none; cursor: pointer; }
        button:hover { background-color: #307ecc; }
        h2 { text-align: center; color: #333; }
    </style>
</head>
<body>
<div class="form-container">
    <h2>用户信息登记</h2>
    <form id="infoForm">
        <input type="text" id="name" placeholder="姓名" required />
        <input type="tel" id="phone" placeholder="手机号" required />
        <select id="gender" required>
            <option value="">选择性别</option>
            <option value="1">先生</option>
            <option value="0">女士</option>
        </select>
        <input type="text" id="addressNo" placeholder="意向地址编号（如：a1）" required />
        <textarea id="remark" placeholder="备注（最多不能超过900字符）"></textarea>
        <button type="submit">提交信息</button>
    </form>
</div>

<script>
    document.getElementById('infoForm').addEventListener('submit', async function(e) {
        e.preventDefault();

        const name = document.getElementById('name').value.trim();
        const phone = document.getElementById('phone').value.trim();
        const gender = document.getElementById('gender').value;
        const addressNo = document.getElementById('addressNo').value.trim();
        const remark = document.getElementById('remark').value.trim();

        // 构造符合目标接口的请求体
        const payload = {
            userName: name,
            gender: gender,
            userPhoneNumber: phone,
            remark: remark,
            intentionAddressNo: addressNo
        };

        try {
            const res = await fetch('http://localhost:8080/customer/intention/add', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(payload)
            });

            const result = await res.json();

            if (result.code === 200) {
                alert('操作成功');
                document.getElementById('infoForm').reset(); // 清空表单
            } else {
                alert(result.msg || '提交失败，请重试');
            }
        } catch (err) {
            console.error('网络请求错误：', err);
            alert('网络错误，请检查服务是否运行（localhost:8080）');
        }
    });
</script>
</body>
</html>
